<div class="bg-white">
    <div class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20">
        <div class="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:-mr-80 lg:-mr-96" aria-hidden="true"></div>
        <div class="mx-auto max-w-7xl px-6 py-32 sm:py-32 lg:px-8">
            <div class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-x-16 lg:gap-y-6 xl:grid-cols-1 xl:grid-rows-1 xl:gap-x-8">
                <h1 class="max-w-2xl text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:col-span-2 xl:col-auto"><%= @converter.name %> converter</h1>
                <div class="mt-6 max-w-xl lg:mt-0 xl:col-end-1 xl:row-start-1">
                    <p class="text-lg leading-8 text-gray-600"><%= render "converters/_description-short.html", conn: @conn, converter: @converter.id %></p>
                </div>
                <img src={Routes.static_path(@conn, "/images/converters/#{@converter.id}.jpg")} alt={"#{@converter.name} converter"} class="mt-10 w-full max-w-lg rounded-2xl object-cover sm:mt-16 lg:mt-0 lg:max-w-none xl:row-span-2 xl:row-end-2 xl:-mt-32">
            </div>
        </div>
        <div class="absolute inset-x-0 top-0 -z-10 h-24 bg-gradient-to-b from-white sm:h-32"></div>
        <div class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32"></div>
    </div>
</div>

<div class="relative px-6 -mt-20">
    <div class="relative mx-auto max-w-7xl">
        <h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">Convert to 👇️</h2>
        <div class="mx-auto mt-24 grid max-w-lg gap-x-5 gap-y-10 lg:max-w-none lg:grid-cols-3">
            <%= for converter <- Azimutt.converters() |> Enum.filter(fn c -> c.generate && c.id != @converter.id end) do %>
            <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src={Routes.static_path(@conn, "/images/converters/#{converter.id}.jpg")} alt={"#{converter.name} connector"}>
                </div>
                <div class="flex flex-1 flex-col justify-between bg-white p-6">
                    <div class="mt-2 block">
                        <p class="text-xl font-semibold text-gray-900"><%= converter.name %></p>
                        <p class="mt-3 text-base text-gray-500"><%= render "converters/_description-short.html", conn: @conn, converter: converter.id %></p>
                    </div>
                    <a href={Routes.website_path(@conn, :convert, @converter.id, converter.id)} class="block mt-3 text-slate-800 font-semibold text-sm hover:underline flex items-center">
                        Convert <%= @converter.name %> to <%= converter.name %>
                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                        </svg>
                    </a>
                </div>
            </div>
            <% end %>
        </div>
    </div>
</div>

<div class="mt-24 flex justify-center">
    <p class="relative rounded-full bg-gray-50 px-4 py-1.5 text-sm leading-6 text-gray-600 ring-1 ring-inset ring-gray-900/5">
        <span class="hidden md:inline">Azimutt is a database exploration and documentation tool made for large databases.</span>
        <a href={Routes.website_path(@conn, :index)} class="font-semibold text-indigo-600"><span aria-hidden="true" class="absolute inset-0"></span> Try Azimutt now <span aria-hidden="true">→</span></a>
    </p>
</div>

<%= render "_footer.html", conn: @conn %>
